<script type="text/javascript" src="js/order.js"></script>
<%
    String product = request.getParameter("product");
    String view = request.getParameter("view");

    boolean show = true;
    boolean showViewComponent = false;
    if (product != null) {
        show = false;
    }
    if (view != null) {
        showViewComponent = true;
    }
%>
<div id="order-container">
    <div class="order-column">
        <img src="images/int.gif"/>
        <div class="block-header">
            Internet
        </div>
        <%
            for (int i = 0; i < 6; i++) {
        %>
        <div class="order-block">
            <%
                if (show) {
            %>
            <input class="radio-int" type="checkbox" name="internet" value="0">
            <% }%>
            <h4>High Speed 10</h4>
            <div class="price">$ 29
                <span class="cent">50<br/>/month</span>
            </div>
            <input class="view-det-btn" type="button" value="view detail >" />

        </div>
        <% }%>

        <%
            //Show planned product  
            for (int i = 0; i < 2; i++) {
        %>
        <div class="order-block-planned">

            <h4>Personal Home Phone</h4>
            <div class="price">$ 5
                <span class="cent">10<br/>/month</span>
            </div>
            <input class="view-det-btn" type="button" value="view detail >" />

        </div>
        <% }%>
    </div>
    <div class="order-column">
        <img src="images/tv.gif"/>
        <div class="block-header">
            TV
        </div>
        <%
            for (int i = 0; i < 6; i++) {
        %>
        <div class="order-block">
            <%
                if (show) {
            %>
            <input  class="radio-tv" type="checkbox" name="tv" value="0">
            <% }%>
            <h4>Premier TV</h4>
            <div class="price">$ 15
                <span class="cent">30<br/>/month</span>
            </div>
            <input class="view-det-btn" type="button" value="view detail >" />

        </div>
        <% }%>
        <%
            //Show planned product  
            for (int i = 0; i < 1; i++) {
        %>
        <div class="order-block-planned">

            <h4>Personal Home Phone</h4>
            <div class="price">$ 5
                <span class="cent">10<br/>/month</span>
            </div>
            <input class="view-det-btn" type="button" value="view detail >" />

        </div>
        <% }%>
    </div>
    <div class="order-column">
        <img src="images/phone.gif"/>
        <div class="block-header">
            Phone
        </div>
        <%
            for (int i = 0; i < 6; i++) {
        %>
        <div class="order-block">
            <%
                if (show) {
            %>
            <input  class="radio-phone" type="checkbox" name="phone" value="0">
            <% }%>
            <h4>Personal Home Phone</h4>
            <div class="price">$ 5
                <span class="cent">10<br/>/month</span>
            </div>
            <input class="view-det-btn" type="button" value="view detail >" />

        </div>
        <% }%>
        <%
            //Show planned product  
            for (int i = 0; i < 3; i++) {
        %>
        <div class="order-block-planned">

            <h4>Personal Home Phone</h4>
            <div class="price">$ 5
                <span class="cent">10<br/>/month</span>
            </div>
            <input class="view-det-btn" type="button" value="view detail >" />

        </div>
        <% }%>

    </div>
</div>
<%
    String buttonText = "Procced";
    String link = "index.jsp?content=customer_view";
    if (show) {
        if (showViewComponent) {
            buttonText = "Modify";
//            Set enother links link = "index.jsp?content=customer_view";
        }
%>
<div id="end-order">
    <span id="price-block">
        Total: $ <span>5000
            <span class="cent">10</span>
        </span>
    </span>
    <a href="<%= link%>">
        <input type="button" value="<%= buttonText%>" />
    </a>
    <%
        if (showViewComponent) {
    %>
    <a href="">
        <input type="button" value="Disconnect" />
    </a>
    <% }%>
</div>
<% }%>


<!--Start--Block show detail information about product-->
<div id="fly-block">
    <div id="product-block">
        <div id="close">
            x
        </div>
        <div>
            <div><h1>Premier TV</h1></div>
            <div class="fly-price-block">
                <span id="price-month" class="price">$ 500
                    <span class="cent">10<br/>/month</span>
                </span>
                <span id="price-activate" class="price">$ 200
                    <span class="cent">50<br/>/activate</span>
                </span>
            </div>
        </div>
        <br/>

        <h4 class="block-header">Settings</h4>
        <div class="table-view" style="padding: 10px 20px 10px 0px;">
            <%
                for (int i = 0; i < 5; i++) {
            %>
            <div>Necessary setting <%= i%>:</div> 
            <div>Value</div>
            <% }%>

            <%
                for (int i = 0; i < 5; i++) {
            %>
            <div>Setting <%= i%>:</div> 
            <div><input type="text"  maxlength="40" value="Default value"/></div>
                <% }%>

        </div>

        <h4 class="block-header">Components</h4>
        <span style="font-size: 15px; font-weight: bold;">Basic: </span>
        Some basics components...
        <h4>Components groups:</h4>
        <div style="padding: 10px 10px 10px 34px;">
            <%
                for (int i = 0; i < 5; i++) {
            %>
            <!--Value - List of ID(or) names components what input in this component group.--> 
            <input class="component-group" type="checkbox" value="comp_2;comp_3;comp_4">Component group (included components)<br/>
            <!--<div>$42,3</div>-->
            <% }%>
        </div>
        <h4>Optional:</h4>
        <div id="components" class="table-view" style="padding: 10px 20px 10px 0px;">

            <%
                for (int i = 0; i < 5; i++) {
            %>
            <div>
                <input id="comp_<%= i%>" type="checkbox" value="Component <%= i%>">
                Component <%= i%>
            </div> 
            <!--Price per month (/m.o) or activate (/act.)-->
            <div>$12,3 /m.o</div>
            <% }%>
        </div>
        <%
            if (show) {
        %>
        <div style="width: 100%; text-align: center;">
            <input id="save-btn" type="button" value="Select product and save parameters"/>
        </div>
        <% }%>
        <%
            if (!show) {
        %>

        <div style="border-top: 1px solid #CCC; padding-top: 10px;">
            <span style="font-weight: bold;">Selected components: </span>
            <span id="comp-in-group" compid=""></span>
            <br/>
            <br/>
            <input type="text" placeholder="Components group name" width="400px"/>
            <input id="save-group-btn" type="button" value="Create component group"/>
        </div>
        <% }%>
    </div>
</div>
<!--Stop--Block show detail information about product-->